<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-input clearable placeholder="匹配名称" v-model="obj.req.key" class="search_key ml5" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
                <span class="btn add" @click="add">添加</span>
            </div>
        </div>
        <div class="table_box">
        <div class="table_" id="tb">
            <ul class="head">
                <li class="wcen">设备编号</li>
                <li class="mw300">关联企业</li>
                <li class="wcen">型号</li>
                <li class="wcen">设备状态</li>
                <li class="mw180 wcen">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="wcen base-color pointer">
                        <span @click="getDataList(x)">{{x.deviceno}}</span>
                    </li>
                    <li class="mw300">{{x.devicename}}</li>
                    <li class="wcen">{{x.productid}}</li>
                    <li class="wcen"><span :class="[x.status==1?'success-color':'warning-color']">{{x.status==1?'在线':'离线'}}</span></li>
                    <li class="mw180 wcen">
                        <el-button class="edit_btn mr10" style="width:60px !important;" type="success" @click="edit(x)">手动抄表</el-button>
                        <DelConfirm class="" @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        </div>
        <Pager :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Edit :worksite_id="obj.drawer.worksite_id" @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Edit from "./energy_edit.vue"
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            design: false,
            designTitle: "",
            worksite_id:0,
        },
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
        }
    });
    let init = () => {
        proxy.$ajax({
            url: '/consumption/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加能耗表"
    }
    let edit = x => {
        proxy.$ajax({
            url: '/consumption/checkMultiMeters',
            data: { id: x.id },
            bfLoading: true,
            timeout:120000
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("手动抄表成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
    let del = x => {
        proxy.$ajax({
            url: '/consumption/delete',
            data: { id: x.id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }

    let getDataList = x => {
        proxy.$emit('gometer',{id: x.id});
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li2 { width: 100px; }
    #tb ul li.li3 { width: 45px; }
    #tb ul li.li4 { width: 45px; }
    #tb ul li.li5 { width: 185px; }
</style>